<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轻动康小程序 - 图标生成器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        }

        h1 {
            color: #333;
            margin-bottom: 10px;
            font-size: 28px;
        }

        .subtitle {
            color: #666;
            margin-bottom: 30px;
        }

        .icon-category {
            margin-bottom: 40px;
        }

        .category-title {
            font-size: 20px;
            color: #4CAF50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #4CAF50;
        }

        .icon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .icon-item {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s;
            cursor: pointer;
        }

        .icon-item:hover {
            background: #e9ecef;
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .icon-item.active {
            background: #4CAF50;
            color: white;
        }

        .icon-preview {
            width: 60px;
            height: 60px;
            margin: 0 auto 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
        }

        .icon-name {
            font-size: 12px;
            color: #666;
            font-weight: 500;
        }

        .icon-item.active .icon-name {
            color: white;
        }

        .controls {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .control-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            font-weight: 500;
            margin-bottom: 8px;
            color: #333;
        }

        input[type="range"] {
            width: 100%;
        }

        input[type="color"] {
            width: 50px;
            height: 40px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .color-input {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .size-info {
            display: inline-block;
            margin-left: 10px;
            color: #666;
            font-size: 14px;
        }

        .download-section {
            background: #4CAF50;
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
        }

        .btn {
            background: white;
            color: #4CAF50;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            margin-right: 10px;
            transition: all 0.3s;
        }

        .btn:hover {
            background: #f0f0f0;
            transform: translateY(-2px);
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }

        .info-box {
            background: #e8f5e9;
            border-left: 4px solid #4CAF50;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
        }

        .info-box h3 {
            color: #4CAF50;
            margin-bottom: 10px;
        }

        .instructions {
            background: #fff3e0;
            border-left: 4px solid #ff9800;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
        }

        .instructions h3 {
            color: #f57c00;
            margin-bottom: 10px;
        }

        .instructions li {
            margin-left: 20px;
            margin-bottom: 5px;
        }

        canvas {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎨 轻动康小程序 - 图标生成器</h1>
        <p class="subtitle">为小程序生成填充风格的图标</p>

        <div class="info-box">
            <h3>📌 使用说明</h3>
            <p>此工具用于生成轻动康小程序所需的填充风格图标。选择图标类型、调整颜色和大小，然后下载PNG格式图片。</p>
        </div>

        <div class="instructions">
            <h3>🚀 制作步骤</h3>
            <ol>
                <li>选择需要的图标类型</li>
                <li>调整尺寸和颜色</li>
                <li>点击"生成图标"按钮</li>
                <li>下载PNG格式图片</li>
                <li>替换到 <code>images/</code> 文件夹</li>
            </ol>
        </div>

        <div class="controls">
            <div class="control-group">
                <label>
                    图标尺寸 (px)
                    <span class="size-info" id="sizeInfo">40x40</span>
                </label>
                <input type="range" id="sizeRange" min="20" max="100" value="40">
            </div>

            <div class="control-group">
                <label>图标颜色</label>
                <div class="color-input">
                    <input type="color" id="iconColor" value="#666666">
                    <span>未激活：灰色 #666666</span>
                </div>
            </div>

            <div class="control-group">
                <label>激活颜色</label>
                <div class="color-input">
                    <input type="color" id="activeColor" value="#4CAF50">
                    <span>激活：绿色 #4CAF50</span>
                </div>
            </div>
        </div>

        <!-- TabBar Icons -->
        <div class="icon-category">
            <h2 class="category-title">TabBar 图标 (40x40px)</h2>
            <div class="icon-grid" id="tabbarGrid">
                <!-- Icons will be generated here -->
            </div>
        </div>

        <!-- Function Icons -->
        <div class="icon-category">
            <h2 class="category-title">功能图标 (32x32px)</h2>
            <div class="icon-grid" id="functionGrid">
                <!-- Icons will be generated here -->
            </div>
        </div>

        <!-- Category Icons -->
        <div class="icon-category">
            <h2 class="category-title">运动分类图标 (80x80px)</h2>
            <div class="icon-grid" id="categoryGrid">
                <!-- Icons will be generated here -->
            </div>
        </div>

        <div class="download-section">
            <h3 style="margin-bottom: 15px;">💾 导出图标</h3>
            <button class="btn" onclick="generateAllIcons()">生成所有图标</button>
            <button class="btn" onclick="downloadSelected()">下载选中图标</button>
        </div>

        <canvas id="canvas"></canvas>
    </div>

    <script>
        // Icon definitions with emoji representations
        const icons = {
            tabbar: {
                home: '🏠',
                video: '▶️',
                community: '👥',
                profile: '👤'
            },
            function: {
                like: '❤️',
                'like-active': '♥️',
                comment: '💬',
                share: '📤',
                'play-icon': '▶️',
                'play-small': '▶',
                check: '✓',
                wechat: '💬',
                upload: '📤',
                image: '🖼️',
                'add-image': '➕'
            },
            category: {
                'category1': '🔥',
                'category2': '💪',
                'category3': '🧘',
                'category4': '⚖️',
                'category5': '🤸',
                'category6': '🏋️',
                'category7': '🏃',
                'category8': '🛡️'
            }
        };

        const iconNames = {
            tabbar: ['首页', '视频', '社区', '个人中心'],
            function: ['点赞', '点赞(激活)', '评论', '分享', '播放', '小播放', '完成', '微信', '上传', '图片', '添加图片'],
            category: ['燃脂', '塑形', '瑜伽', '普拉提', '拉伸', '力量', '有氧', '康复']
        };

        let selectedIcons = [];

        function renderIcons() {
            renderCategory('tabbar', Object.values(icons.tabbar), iconNames.tabbar, 40);
            renderCategory('function', Object.values(icons.function), iconNames.function, 32);
            renderCategory('category', Object.values(icons.category), iconNames.category, 80);
        }

        function renderCategory(id, iconList, nameList, defaultSize) {
            const grid = document.getElementById(id + 'Grid');
            grid.innerHTML = '';
            
            iconList.forEach((icon, index) => {
                const item = document.createElement('div');
                item.className = 'icon-item';
                item.dataset.icon = icon;
                item.dataset.name = nameList[index];
                item.dataset.size = defaultSize;
                item.onclick = () => toggleIcon(item);
                
                item.innerHTML = `
                    <div class="icon-preview">${icon}</div>
                    <div class="icon-name">${nameList[index]}</div>
                `;
                
                grid.appendChild(item);
            });
        }

        function toggleIcon(item) {
            item.classList.toggle('active');
            const icon = {
                emoji: item.dataset.icon,
                name: item.dataset.name,
                size: parseInt(item.dataset.size)
            };
            
            if (item.classList.contains('active')) {
                selectedIcons.push(icon);
            } else {
                selectedIcons = selectedIcons.filter(i => i.name !== icon.name);
            }
        }

        document.getElementById('sizeRange').addEventListener('input', (e) => {
            const size = e.target.value;
            document.getElementById('sizeInfo').textContent = `${size}x${size}`;
        });

        function downloadSelected() {
            if (selectedIcons.length === 0) {
                alert('请先选择要下载的图标');
                return;
            }

            selectedIcons.forEach((icon, index) => {
                setTimeout(() => {
                    downloadIcon(icon.emoji, icon.name, icon.size);
                }, index * 100);
            });
        }

        function downloadIcon(emoji, name, size) {
            const canvas = document.getElementById('canvas');
            canvas.width = size;
            canvas.height = size;
            const ctx = canvas.getContext('2d');

            // Set background
            ctx.fillStyle = document.getElementById('iconColor').value;
            ctx.fillRect(0, 0, size, size);

            // Draw emoji
            ctx.font = `${size * 0.7}px Arial`;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(emoji, size / 2, size / 2);

            // Download
            canvas.toBlob((blob) => {
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `${name}.png`;
                a.click();
                URL.revokeObjectURL(url);
            });
        }

        function generateAllIcons() {
            alert('生成所有图标功能需要配合 Feather Icons 使用。\n请参考 images/ICON_FILLING_GUIDE.md 文档获取详细信息。');
        }

        renderIcons();
    </script>
</body>
</html>


